<template>
  <div class="cPage">
    <div class="view">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="新闻/视频列表" name="1">
          <template slot="title">
            新闻/视频列表
            <el-button
              type=""
              style="margin-left:20px"
              @click.stop="getArticleList"
              >刷新列表</el-button
            >
            <el-button
              type="primary"
              style="margin-left:20px"
              @click.stop="createEditNewAd(originForm2, false, 0)"
              >新增站内新闻</el-button
            >
            <el-button
              type="primary"
              style="margin-left:20px"
              @click.stop="createEditNewAd(originForm2, false, 1)"
              >新增站外</el-button
            >
          </template>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="标题"></el-table-column>
            <el-table-column label="来源类型" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ newStatus[scope.row.sourceType] }} </span>
              </template>
            </el-table-column>
            <el-table-column label="新闻类型" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ typeStatus[scope.row.type] }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.createDate | moment("YYYY-MM-DD hh:mm:ss") }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="权重"> </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click.stop="
                    createEditNewAd(scope.row, true, scope.row.sourceType)
                  "
                  >编辑</el-button
                >
                <el-button type="text" @click="delItem(scope.row, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationCommon">
            <el-pagination
              background
              :page-size="limit"
              :total="total"
              @current-change="getArticleList"
              layout="prev, pager, next"
            >
            </el-pagination>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog
        width="40%"
        title="添加/编辑站内新闻"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="searchKey"
              placeholder="请输入标题、作者"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="articleSelectSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <articleSelect
          ref="articleSelect"
          :tabs="['ZX', 'HD', 'AL', 'BG']"
          :selectUUID="originForm2.sourceId"
          :selectArticle="selectArticle"
          :searchKey=searchKey
        />
        <el-form>
          <el-form-item label="权重" prop="weight">
            <el-input
              v-model="originForm2.weight"
              style="width: 80px"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addArticleInsert">确定</el-button>
      </el-dialog>
      <el-dialog
        width="40%"
        title="添加/编辑外部链接/视频"
        :visible.sync="outerVisible"
        append-to-body
      >
        <el-form
          label-position="right"
          label-width="120px"
          :model="originForm2"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="标题" prop="name">
            <el-input
              v-model="originForm2.name"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="链接" prop="name">
            <el-input
              v-model="originForm2.linkUrl"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="originForm2.type">
              <el-radio
                v-for="(value, key) in newTypeStatus"
                :label="Number(key)"
                :key="key"
                >{{ value }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="封面"
            prop="imgUrl"
            @click="uploadImageName = 'imgUrl'"
          >
            <uploadCropper
              :handleAvatarSuccess="handleAvatarSuccess('imgUrl')"
              :url="originForm2.imgUrl"
            />
            <el-alert
              style="margin-top: 50px"
              show-icon
              title="图片比最佳分辨率为240px：135px的整数倍。"
              type="info"
            >
            </el-alert>
          </el-form-item>
          <el-form-item label="权重" prop="weight">
            <el-input
              v-model="originForm2.weight"
              style="width: 80px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addArticleInsert">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  adStatus,
  typeStatus,
  statusStatus,
  newStatus,
  newTypeStatus,
} from "@/config/ad";
import articleSelect from "../../components/articleSelect";

export default {
  components: {
    articleSelect,
  },
  props: ["originForm", "zlId"],
  data() {
    return {
      limit: 10,
      total: 0,
      innerVisible: false,
      outerVisible: false,
      activeNames: ["1"],
      searchKey: '',
      adStatus,
      newStatus,
      newTypeStatus,
      viewType: "page",
      dialogVisible: false,
      dialogVisible2: false,
      typeStatus,
      statusStatus,
      formInline: {
        searchKey: "",
      },
      tableData: [],
      // 表单相关
      isEdit: false,
      originForm2: {
        type: 0,
        status: 1,
        name: "",
        weight: 1,
        topMenu: 1,
        weight: 0,
        items: [],
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        job: [{ required: true, message: "请输入专栏职务", trigger: "blur" }],
        desc: [{ required: true, message: "请输入专栏介绍", trigger: "blur" }],
        bigImage: [
          { required: true, message: "请输入专栏介绍", trigger: "blur" },
        ],
        smallImage: [
          { required: true, message: "请输入专栏介绍", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择发布状态", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    closeEditModal() {
      this.getArticleList();
      this.viewType = "page";
      this.dialogVisible = false;
    },
    articleSelectSearch() {
      this.$refs['articleSelect'].handleClick(this.searchKey)
    },
    selectArticle(item, detailName) {
      this.originForm2.linkUrl = item.url;
      this.originForm2.sourceId = item.uuid;
      this.originForm2.imgUrl = item.coverUrl;
      this.originForm2.name = item.name;
    },
    addArticleInsert() {
      const isEdit = this.isEdit
      const ajaxType = isEdit ? "put" : "post";
      const url = isEdit
        ? `/api/zl/title/item/${this.originForm2.uuid}.json`
        : `/api/zl/title/${this.originForm.uuid}/item.json`;
      this.$axios[ajaxType](url, this.originForm2).then((response) => {
        this.$message.success("提交成功");
        this.getArticleList();
        this.innerVisible = false;
        this.outerVisible = false;
      });
    },
    insertPic() {
      this.tableData.push({
        titleId: this.originForm2.uuid,
        name: "新增",
        sourceType: "0",
        weight: "0",
        type: "0",
        linkUrl: "",
        imgUrl: "",
        isNew: true,
      });
    },
    createEditNewAd(config, isEdit, sourceType) {
      this.isEdit = isEdit;
      this.originForm2 = isEdit ? config : {type: 0};
      this.originForm2.sourceType = sourceType;
      this.searchKey = '';
      this[sourceType ? "outerVisible" : "innerVisible"] = true;
      console.log("新增", this.originForm2);
    },
    delItem(row, index) {
      if (row.isNew) {
        this.tableData.splice(index, 1);
        return;
      }
      this.$axios["delete"](`/api/zl/title/item/${row.uuid}.json`, row).then(
        (response) => {
          this.$message.success("提交成功");
          this.getArticleList();
        }
      );
    },
    handleAvatarSuccess(name, res, file) {
      const fileName = name;
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);
        this.originForm2[fileName] = fileObj.url;
        this.originForm2 = JSON.parse(JSON.stringify(this.originForm2));
      };
    },
    getArticleList(page = 1) {
      const { formInline, limit } = this;
      const start = (page - 1) * limit || 0;;
      const params = {
        start,
        limit
      };
      this.$axios
        .get(`/api/zl/title/${this.originForm.uuid}/item.json`, { params })
        .then((response) => {
          this.tableData = response.list;
        });
    },
  },
  created() {
    this.closeEditModal();
  },
};
</script>
<style lang="scss" scoped>
.cPage {
  padding: 30px 15px;
}
.edit {
  margin: 0px 40px 0 0;
}
</style>
